<template>
  <div class="activ-ation">
    <div class="efficency" ref="efficency"></div>
  </div>
</template>

<script>
// 引入元素监听大小
import ElementMonitor from "element-resize-detector";
export default {
  data() {
    return {
      activation: {
        title: [
          {
            text: "1号冲床稼动率",
            left: "10%",
            top: "45%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "10%",
            top: "17%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          // 2号
          {
            text: "2号冲床稼动率",
            left: "30%",
            top: "45%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "30%",
            top: "17%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },

          // 3号

          {
            text: "3号冲床稼动率",
            left: "50%",
            top: "45%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "50%",
            top: "17%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },

          // 4号

          {
            text: "4号冲床稼动率",
            left: "70%",
            top: "45%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "70%",
            top: "17%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },

          //  5号
          {
            text: "5号冲床稼动率",
            left: "90%",
            top: "45%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "90%",
            top: "17%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },

          //  冲床
          {
            text: "1号机器人稼动率",
            left: "10%",
            top: "94%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "10%",
            top: "67%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },

          // 2号

          {
            text: "2号机器人稼动率",
            left: "30%",
            top: "94%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },

          {
            text: "20%",
            left: "30%",
            top: "67%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },

// 3号
          {
            text: "3号机器人稼动率",
            left: "50%",
            top: "94%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "50%",
            top: "67%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          // 4号
          {
            text: "4号机器人稼动率",
            left: "70%",
            top: "94%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "70%",
            top: "67%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          // 5号
          {
            text: "5号机器人稼动率",
            left: "90%",
            top: "94%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "14",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          {
            text: "20%",
            left: "90%",
            top: "67%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "30",
              color: "#57bbf7",
              textAlign: "center",
            },
          },
          
        ],
        series: [
          {
            name: "一号冲床",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#8cc265",
              shadowColor: "#8cc265",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["11%", "23%"],

            data: [
              {
                value: 10,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 90,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },
          {
            name: "二号冲床",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#57bbf7",
              shadowColor: "#57bbf7",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["31%", "23%"],

            data: [
              {
                value: 10,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 90,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },
          {
            name: "三号冲床",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#8cc265",
              shadowColor: "#8cc265",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["51%", "23%"],

            data: [
              {
                value: 10,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 90,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },
          {
            name: "四号冲床",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#57bbf7",
              shadowColor: "#57bbf7",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["71%", "23%"],

            data: [
              {
                value: 20,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 80,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },
          {
            name: "五号冲床",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#8cc265",
              shadowColor: "#8cc265",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["91%", "23%"],
            data: [
              {
                value: 10,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 90,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },

          // 机器人
          {
            name: "一号机器人",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#8a588f",
              shadowColor: "#8a588f",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["11%", "73%"],

            data: [
              {
                value: 10,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 90,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },
          {
            name: "二号机器人",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#57bbf7",
              shadowColor: "#57bbf7",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["31%", "73%"],

            data: [
              {
                value: 10,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 90,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },
          {
            name: "三号机器人",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#8a588f",
              shadowColor: "#8a588f",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["51%", "73%"],

            data: [
              {
                value: 10,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 90,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },
          {
            name: "四号机器人",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#57bbf7",
              shadowColor: "#57bbf7",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["71%", "73%"],

            data: [
              {
                value: 90,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 10,
                name: "4号机器人",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },
          {
            name: "五号机器人",
            type: "pie",
            startAngle: 0,
            radius: ["20%", "20%"],
            clockWise: false,
            radius: [48, 55],
            itemStyle: {
              color: "#8a588f",
              shadowColor: "#8a588f",
              shadowBlur: 0,
              label: null,
              labelLine: null,
              borderWidth: 1,
            },
            hoverAnimation: false,
            center: ["91%", "73%"],
            data: [
              {
                value: 10,
                label: {
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#57bbf7",
                  },
                  fontWeight: "bold",
                  fontSize: "20",
                  color: "#57bbf7",
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                },
              },
              {
                value: 90,
                name: "666",
                itemStyle: {
                  color: "#f4f4f7",
                },
                emphasis: {
                  itemStyle: {
                    color: "#f4f4f7",
                  },
                },
              },
            ],
            label: {
              show: false,
              rotate: false,
              position: "outer",
              alignTo: "none",
              margin: "20%",
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
          },

          // 机器人end
        ],
      },
    };
  },
  mounted() {
    this.EfficencyEcharts();
  },
  methods: {
    EfficencyEcharts() {
      let efficency = this.$echarts.init(this.$refs.efficency);
      console.log(efficency);
      ElementMonitor().listenTo(this.$refs.efficency, (res) => {
        efficency.resize();
      });
      efficency.setOption(this.activation);
    },
  },
};
</script>

<style lang="less" scoped>
.activ-ation {
  width: 100%;
  height: 100%;
  .efficency {
    width: 100%;
    height: 1.8rem;
    margin: 0.05rem auto 0;
  }
}
</style>
